<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>后台登录</title>
<link rel="stylesheet" type="text/css"
	href="assets/admin/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="assets/admin/css/login.css" />
<script src="assets/js/aJaxUtil.js"></script>
<script src="assets/js/jquery-3.3.1.min.js"></script>
</head>

<body>
	<div class="m-login-bg">
		<div class="m-login">
			<h3>人力资源管理系统</h3>
			<div class="m-login-warp">
				<form class="layui-form">
					<div class="layui-form-item">
						<input type="text" name="userName" required lay-verify="required|userName"
							placeholder="用户名" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-item">
						<input type="password" name="userPassword" required
							lay-verify="required|userPassword" placeholder="密码" autocomplete="off"
							class="layui-input">
					</div>
					<!-- 					<div class="layui-form-item">
							<input type="radio" name="type" value="1" title="教师" checked="">
      						<input type="radio" name="type" value="2" title="学生">
						</div> -->
					<div class="layui-form-item m-login-btn">
						<div class="layui-inline" style="width:35%">
							<img alt="验证码" id="img"  src="/VerifyCode/getVerifyCode" width="120" height="40" border="1px">
						</div>
						<div class="layui-inline" style="width:60%;float: right;">
							<input type="text" name="verifyCode" required
							lay-verify="required|verifyCode"  placeholder="请输入验证码" 
							class="layui-input">
						</div>
					</div>
						
					<div class="layui-form-item m-login-btn">
						<div class="layui-inline">
							<button class="layui-btn layui-btn-normal" lay-submit
								lay-filter="login">登录</button>
						</div>
						<div class="layui-inline">
							<button type="reset" class="layui-btn layui-btn-primary">取消</button>
						</div>
					</div>
				</form>
			</div>
			<p class="copyright">Copyright 2018-2019 by HR</p>
		</div>
	</div>
	<script src="assets/admin/layui/layui.all.js" type="text/javascript"
		charset="utf-8"></script>
	<script>
		layui
				.use(
						[ 'form', 'layedit', 'laydate', 'jquery' ],
						function() {
							var form = layui.form, layer = layui.layer, admin = layui.admin, $ = layui.jquery;

							//自定义验证规则
							form.verify({
								userName : function(value) {
									if (value.length < 4) {
										return '用户名至少4个字符';
									}
								},
								userPassword : [ /(.+){5,12}$/, '密码必须5到12位' ],
								verifyCode : [/^[a-zA-Z0-9]{4}$/, '验证码4位字母数字组成' ]

							});
							//监听提交
							form.on('submit(login)', function(data) {
								var str = JSON.stringify(data.field);
								var param = JSON.parse(str);
								$.ajax({
									//几个参数需要注意一下
									type : "POST",//方法类型
									dataType : "json",//预期服务器返回的数据类型
									url : "/user/login",//url
									data : param,
									success : function(result) {
										if (result.code == "0") {
											location.href = "/index.html";
										} else {
											layer.msg(result.msg, {
												icon : 5
											});
											img();
										}
									},
									error : function() {
										layer.msg('服务器错误', {
											icon : 5
										});
									}
								});

								return false;
							});
							$('#img').on('click',function(e){
								img();
							})
							function img(){
								$("#img").attr("src","/VerifyCode/getVerifyCode");
							}

						});
	</script>
</body>

</html>